<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片 -->
        <el-card>
             <el-alert
                title="添加商品信息"
                type="info"
                center
                show-icon>
            </el-alert>
            <!-- 步骤条 -->
            <el-steps :space="300" :active="parseInt(activeIndex)" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>

            <!-- 选项卡 -->
            <!-- form 表单把他们都包起来 是一个统一的 form表单 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm" label-position="top">
                <el-tabs tab-position="left"  v-model="activeIndex" @tab-click="handleClick" :before-leave="beforeTabLeave">
                    <!-- el-tab-pane 必须是el-tabs的子元素 -->
                    <el-tab-pane label="基本信息" name="0">
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="addForm.goods_name" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="goods_price" >
                            <el-input v-model="addForm.goods_price" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量" prop="goods_weight" >
                            <el-input v-model="addForm.goods_weight" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量" prop="goods_number" >
                            <el-input v-model="addForm.goods_number" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类" prop="goods_cat">
                             <el-cascader
                            v-model="addForm.goods_cat"
                            :options="categoriesList"
                            @change="handleChange"
                            :props="{ expandTrigger: 'hover',
                        
                            value:cascaderProps.value,
                            label:cascaderProps.label,
                            children:cascaderProps.children}"
                            clearable
                            size="medium"
                            
                            ></el-cascader>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品参数" name="1">
                        商品参数
                        <!-- 渲染 表单的item项 -->
                        <el-form-item v-for="item of manyTableDate" :key="item.attr_id" :label="item.attr_name">
                            <!-- 用 多选框 组 -->
                            <el-checkbox-group v-model="item.attr_vals">
                                <el-checkbox  v-for="(cb,i) of item.attr_vals" :key="i" :label="cb" border></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品属性" name="2">商品属性
                        <el-form-item v-for="item of onlyTableDate" :key="item.attr_id" :label="item.attr_name">
                            <!-- 双向数据绑定 -->
                            <el-input v-model="item.attr_vals"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品图片" name="3">商品图片
                        <!-- action图片要上传到的api地址 完整的地址  :file-list="fileList"文件列表 list-type 指定预览方式  headers设置上传的请求头  得手动添加请求头 
                        on-success 上传成功之后的钩子函数-->
                        <el-upload
                        
                        action="http://127.0.0.1:8888/api/private/v1/upload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        
                        list-type="picture"
                        :headers="headerObj"
                        :on-success="handleSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="商品内容" name="4">商品内容
                        <!-- 富文本编辑器 -->
                        <quill-editor
                        v-model="addForm.goods_introduce"
                        ref="myQuillEditor">
                        <!-- :options="editorOption"
                        @focus="onEditorFocus($event)"
                        @blur="onEditorBlur($event)"
                        @change="onEditorChange($event)"> -->
                        </quill-editor>
                        
                        <el-button type="primary" @click="add">添加商品</el-button>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-card>

        <!-- 图片预览 -->
        <el-dialog
        title="图片预览"
        :visible.sync="previewDialogVisible"
        width="50%"
        >
        <img :src="previewPath" alt="" class="previewPic">
        
        </el-dialog>
    </div>
</template>

<script>
import {getGoodsList,getCategoriesAttributes} from "../../api/goods"
import {addGoods} from "../../api/goodss"
    export default {
        data(){
            return {
                // 联动 是活的 goods_cat绑定在联级 选择器上
                activeIndex:'0',
                addForm:{
                    goods_name:"",
                    goods_price:0,
                    goods_weight:0,
                    goods_number:0,
                    goods_cat:[],
                    pics:[],
                    // 商品的详细介绍
                    goods_introduce:'',
                    // 静态参数 和 动态数据
                    attrs:[]
                },
                addFormRules:{
                    goods_name:[
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                        { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
                    ],
                    goods_price:[
                        { required: true, message: '请输入商品价格', trigger: 'blur' },
                        
                    ],
                    goods_weight:[
                        { required: true, message: '请输入商品重量', trigger: 'blur' },
                    ],
                    goods_number:[
                        { required: true, message: '请输入商品数量', trigger: 'blur' },
                    ],
                    goods_cat:[
                        { required: true, message: '请输入商品分类', trigger: 'chagne' },
                    ]
                },
                categoriesList:[],
                // selectedKeys:[],
                cascaderProps:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children'
                },
                manyTableDate:[],
                onlyTableDate:[],
                // 图片上传的 请求头路径
                headerObj:{
                    Authorization: window.sessionStorage.getItem('token')
                },
                previewPath:'',
                previewDialogVisible:false,
                
            }
        },
        created(){
            this.getGoodsList()
        },
        methods:{
            // 获取参数写到这里 判断this.activeIndex 是对应的name的值的时候执行
            async handleClick() {
                // console.log(this.activeIndex);
                if(this.activeIndex === "1"){
                    // console.log("动态参数面板");
                let id = this.addForm.goods_cat[2]
                // console.log(id,"idididididi");
                   let {data:res} = await getCategoriesAttributes({id,sel:{sel:'many'}})
                   console.log(res,"分类参数列表");
                   if(res.meta.status !== 200){
                       return this.$message.error("获取动态参数列表失败！")
                   }
                    //    将字符串变成 数组
                    res.data.forEach(item =>{
                        item.attr_vals.length === 0 ? [] :
                        item.attr_vals = item.attr_vals.split(",")
                    })
                    this.manyTableDate = res.data

                    console.log(this.manyTableDate,"jajja ");
                }
                // 商品属性面板

                else if(this.activeIndex === "2"){
                   let id = this.addForm.goods_cat[2]
                   let {data:res} = await getCategoriesAttributes({id,sel:{sel:'only'}})
                   console.log(res,"分类参数列表");
                   if(res.meta.status !== 200){
                       return this.$message.error("获取静态属性列表失败！")
                   }

                   this.onlyTableDate = res.data
                    console.log(this.onlyTableDate,"静态属性");
                }
            },
            async getGoodsList(){
                let {data:res} = await getGoodsList()
                console.log(res,"商品分类数据列表");
                this.categoriesList = res.data
            },
             handleChange(value) {
                //  console.log(value,"级联选择器的值");

                console.log(this.addForm.goods_cat,"级联选择器的值");
                if(this.addForm.goods_cat.length !== 3){
                    this.$message.error('请选择三级选择选择器')
                    this.addForm.goods_cat = []
                }
            },
            // 控制 不选择 产品分类的话 不能进行跳转
            beforeTabLeave(activeName, oldActiveName){
                console.log(this.addForm.goods_name,"llll");
                if(this.addForm.goods_name === ""){
                    this.$message.error('商品名称不能为空！')
                    return false
                 }else if(oldActiveName === '0' && this.addForm.goods_cat.length !== 3){
                    this.$message.error('请先选择产品分类')
                    return false
                    }
                    // console.log(activeName, oldActiveName,"即将离开的标签页名称");
                    
            },
            // 处理图片预览效果
            handlePreview(file) {
                console.log(file);
                this.previewPath = file.response.data.url
                this.previewDialogVisible = true
            },
            // 处理移除图片的操作
            handleRemove(file, fileList) {
                console.log(file, fileList);
                // 1.获取将要删除图片的临时路径
                // 2.从pics数组 中 找到这个图片的临时路径
                // 3.用splice方法 将图片信息对象 从pics数组中 移除出去

                const filePath = file.response.data.tmp_path
                // 箭头函数
                const i = this.addForm.pics.findIndex(x =>x.pic === filePath)


                this.addForm.pics.splice(i ,1)
                console.log(this.addForm.pics,"删除之后的图片数组");
            },
            handleSuccess(response, file, fileList){
                console.log(response,"图片上传成功之后的返回对象");
                // 1 拼接得到一个图片信息对象
                // 2 push到 图片数组
                const picInfo = {pic:response.data.tmp_path}

                this.addForm.pics.push(picInfo)

                console.log(this.addForm.pics,"添加后的图片数组");
            },

            // 可以 用lodash 插件 实现 对对象和数组等 进行操作
            add(){
                // console.log(this.addForm,"添加按钮执行");
                // 实现表单结果的预验证
                this.$refs.addFormRef.validate( async valid => {
                    if(!valid){
                        return this.$message.error('请填写必要的表单项目！')
                    }
                    // 执行添加的业务逻辑
                    // 深拷贝  lodash cloneDeep(obj)  需要进行安装  引入 为 _ (下划线)
                    // 不深拷贝的话 级联选择器 会进行报错
                    const form = JSON.parse(JSON.stringify(this.addForm)) 
                    form.goods_cat = form.goods_cat.join(',')

                    // 处理 动态参数 和 静态属性  数据之间的相互转换
                    // console.log(this.manyTableDate,"动态属性");
                    
                    this.manyTableDate.forEach(item => {
                        // 直接定义一个新对象 直接进行赋值就可以
                        const newInfo = {attr_id:item.attr_id,attr_value:item.attr_vals.join(',')}
                        this.addForm.attrs.push(newInfo)
                    })
                   
                    console.log(this.onlyTableDate,"静态参数");
                    this.onlyTableDate.forEach(item => {
                        // 直接定义一个新对象 直接进行赋值就可以
                        const newInfo = {attr_id:item.attr_id,attr_value:item.attr_vals}
                        this.addForm.attrs.push(newInfo)
                    })
                    console.log( this.addForm.attrs,"处理之后的新的数组");

                    form.attrs = this.addForm.attrs
                    // console.log(form,"深拷贝之后的表单数据");

                    let {data:res} = await addGoods(form)
                    console.log(res,"添加之后的返回值");

                    if(res.meta.status !== 201){
                        return this.$message.error('添加商品失败！')
                    }

                    this.$message.success('添加商品成功！')
                    // 跳转到 商品页面
                    this.$router.push('/goods')
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-card,.el-steps{
        margin:15px 0;
    }
    // .el-step__title{
    //     font-size: 30px !important;
    //     /* color: burlywood; */
    // }
</style>
<style lang="less" >
    .el-step__title{
        font-size: 14px;
        /* color: burlywood; */
    }
    // .el-tabs__content{
    //     height: 600px;
    // }
    .el-checkbox {
        margin: 0 10px !important;
    }
    .previewPic{
        width: 100%;
        height: 100%;
    }
    .ql-editor{
        min-height: 300px;
    }
    .quill-editor{
        margin-bottom: 20px;
    }
</style>